<template>
  <!--根标签也不要了-->
  <img style="width: 30px;height: 30px;" alt="Vue logo" src="./assets/logo.png">
  <SetUp msg="hello v3"/>
  <Refcomponent @hello="showHello" msg="hello你好" school="xx学校">
  <!--<template v-slot:asd>-->
    <template #asd>
      <span>ssg</span>
    </template>
  </Refcomponent>
  <hr/>
  <Computed></Computed>
  <WatchCom></WatchCom>
  <WatchEffect></WatchEffect>
  <hr/>
  <LifeV3></LifeV3>
  <div style="color: red">provide</div>
  <HookApply></HookApply>
  <ToRefAndToRefs></ToRefAndToRefs>
  <CustomRef></CustomRef>

  <Suspense>
    <template v-slot:default>
      <SuspenseCom/>
    </template>
    <template v-slot:fallback>
      <h3>稍等，加载中...</h3>
    </template>
  </Suspense>

  <Test></Test>
</template>

<script>
import SetUp from './components/SetUp.vue'

import Refcomponent from './views/v3ele/RefComponent.vue'
import Computed from "@/components/Computed.vue";
import WatchCom from "@/components/WatchCom.vue";
import WatchEffect from "./views/v3ele/WatchEffect.vue"
import LifeV3 from "@/components/LifeV3";

import Test from '@/components/Test'

//hook
import HookApply from "@/components/HookApply";
import ToRefAndToRefs from "@/components/ToRefAndToRefs";
import { reactive,toRefs,provide } from 'vue'
import CustomRef from "@/components/otherComposition/CustomRef";

// import Child from './components/Child'//静态引入
import {defineAsyncComponent} from 'vue'
const SuspenseCom = defineAsyncComponent(()=>import('./views/v3ele/otherComposition/Suspense')) //异步引入组件

export default {
  name: 'App',
  components: {
    SetUp,
    Refcomponent,
    Computed,
    WatchCom,
    WatchEffect,
    LifeV3,
    HookApply,
    ToRefAndToRefs,
    CustomRef,
    SuspenseCom,
    Test
  },
  setup(){
    function showHello(value) {
      console.log("showHello",`接收的数据是${value}`)
    }
    let car = reactive({name:'奔驰',price:'40W'})
    // provide注入后代数据 与 inject 接收后代数据
    provide('car',car) //给自己的后代组件传递数据

    return {
      showHello,
      ...toRefs(car)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>



